大家好,今天我們要來介紹flutter基本概念。首先我們要知道flutter 是一個由 Google 開發的開源 UI 軟體開發工具包,用於開發跨平台的應用程式。它使用 Dart 語言,允許開發者寫一份程式碼就能實現 iOS、Android、Web 和桌面應用程式。
而首先要介紹的是widget。在 Flutter 中,widget 是組成頁面的基本元素。
常見具體的widget有以下幾種:
用於顯示文字內容
Text(
'Hello, World!',
);
用於顯示圖片
Image.network('https://example.com/image.jpg');
用於顯示圖示
Icon(Icons.favorite, color: Colors.red, size: 30);
用於顯示按鈕,而常見的按鈕又分為下列三種
ElevatedButton(
onPressed: () {},
child: Text('Click Me'),
);
用於水平(Row)或垂直(Column)排列其子 widget。
Row(
children: [
Icon(Icons.star),
Text('Star'),
],
);
Column(
children: [
Text('Item 1'),
Text('Item 2'),
],
);
是一個大容器的概念,裡面可以裝各種設定屬性。例如:padding、color、child 等等。
Container(
padding: EdgeInsets.all(16),
color: Colors.blue,
child: Text('Hello, Container!'),
);
提供應用程式的基本結構以及框架,是一個非常重要的widget,包含許多常見UI元素,如 AppBar、Drawer、BottomNavigationBar 等等。
Scaffold(
appBar: AppBar(title: Text('My App')),
body: Center(child: Text('Hello, Scaffold!')),
);
是在Scaffold 中常見的 UI 元素之一,用於顯示應用程式的標題和操作按鈕。
AppBar(
title: Text('App Bar'),
actions: [IconButton(icon: Icon(Icons.settings), onPressed: () {})],
);
建立表單以及管理用戶輸入表單。
Form(
child: Column(
children: [
TextFormField(decoration: InputDecoration(labelText: 'Username')),
TextFormField(decoration: InputDecoration(labelText: 'Password'), obscureText: true),
],
),
);
這些都是flutter 中常見的widget ,也是我們程式的基礎架構。利用這些 widget,我們可以快速建構應用程式的基本框架,例如使用 Scaffold 來定義整體架構,使用 AppBar 來設置應用程式的標題和按鈕,使用 Column 和 Row 來實現垂直和水平的佈局,通過 Container 來控制各單位的樣式和大小。
我們明天見~